<template>
    <div>
        <form action="/" method="POST" @submit.prevent="sendData">
            <div>
                用户名：<input type="text" name="username" id="username" v-model="formData.username">
            </div>
            <div>
                密码：<input type="password" name="password" id="password" v-model="formData.password">
            </div>
            <select id="group" value="hobby" v-model="formData.hobby">爱好
                <option value="">--Please choose an option--</option>
                <option value="wushu">武术</option>
                <option value="jianshen">健身</option>
                <option value="zuofan">做饭</option>
                <option value="feipan">飞盘</option>
            </select>
            <div>
                <input type="radio" name="sex" value="man" v-model="formData.sex">男
                <input type="radio" name="sex" value="women" v-model="formData.sex">女
            </div>
            <div>
                <input type="checkbox" name="skill" value="Java" v-model="formData.skill">Java
                <input type="checkbox" name="skill" value="python" v-model="formData.skill">Python
            </div>
            <input type="submit" value="提交">
        </form>
    </div>
</template>

<script>
export default {
    name: "TsetForm",
    data() {
        return {
            formData:{
                username:"",
                password:"",
                hobby:"",
                sex:"",
                skill:[],
            }
        }
    },
    methods: {
        sendData() {
            console.log(this.formData)
        }
    }
}
</script>

<style>

</style>